<html lang="en"><head><meta charSet="utf-8"/><link rel="shortcut icon" type="image/vnd.microsoft.icon" href="images/favicon.ico"/><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/><meta name="mobile-web-app-capable" content="yes"/><meta name="apple-mobile-web-app-capable" content="yes"/><meta name="description" content="Typography component for showing a caption."/><meta name="twitter:card" content="summary"/><meta name="twitter:title" content="Caption · React Native Paper"/><meta name="twitter:description" content="Typography component for showing a caption."/><meta property="og:type" content="website"/><meta property="og:title" content="Caption · React Native Paper"/><meta property="og:description" content="Typography component for showing a caption."/><title>Caption · React Native Paper</title><link type="text/css" rel="stylesheet" href="app.css"/></head><body>
    <script>
      var theme;

      try {
        // Check if there is a preference saved
        theme = localStorage.getItem('preference-theme');
      } catch (e) {
        // Ignore
      }

      if (theme === undefined) {
        try {
          // If no preferred theme is set, read OS preference
          theme = window.matchMedia('(prefers-color-scheme: dark)').matches
            ? 'dark'
            : 'light';
        } catch (e) {
          // Ignore
        }
      }

      if (theme === 'dark') {
        document.body.classList.add('dark-theme');
      }
    </script>
  <div id='root'><div class="Layout_lugqar2"><aside class="SidebarContent_s9nrg4n"><input type="checkbox" id="slide-sidebar" role="button" class="MenuButton_mzfqg8l"/><label for="slide-sidebar" class="MenuIcon_m1mups47">☰</label><div class="MenuContent_mdzibsv"><input type="search" value="" placeholder="Filter…" class="Searchbar_s1nn5lbd"/><nav class="Navigation_nlggdah"><a data-selected="false" class="LinkItem_l1gpol2t" href="index.html">Home</a><a data-selected="false" class="LinkItem_l1gpol2t" href="getting-started.html">Getting Started</a><a data-selected="false" class="LinkItem_l1gpol2t" href="theming.html">Theming</a><a data-selected="false" class="LinkItem_l1gpol2t" href="icons.html">Icons</a><a data-selected="false" class="LinkItem_l1gpol2t" href="fonts.html">Fonts</a><a data-selected="false" class="LinkItem_l1gpol2t" href="using-on-the-web.html">Using on the Web</a><a data-selected="false" class="LinkItem_l1gpol2t" href="recommended-libraries.html">Recommended Libraries</a><a data-selected="false" class="LinkItem_l1gpol2t" href="showcase.html">Showcase</a><a data-selected="false" class="LinkItem_l1gpol2t" href="contributing.html">Contributing</a><hr class="SeparatorItem_slziuo3"/><a data-selected="false" class="LinkItem_l1gpol2t" href="activity-indicator.html">ActivityIndicator</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="appbar.html">Appbar</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="appbar-action.html">Appbar.Action</a><a data-selected="false" class="LinkItem_l1gpol2t" href="appbar-back-action.html">Appbar.BackAction</a><a data-selected="false" class="LinkItem_l1gpol2t" href="appbar-content.html">Appbar.Content</a><a data-selected="false" class="LinkItem_l1gpol2t" href="appbar-header.html">Appbar.Header</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="">Avatar</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="avatar-icon.html">Avatar.Icon</a><a data-selected="false" class="LinkItem_l1gpol2t" href="avatar-image.html">Avatar.Image</a><a data-selected="false" class="LinkItem_l1gpol2t" href="avatar-text.html">Avatar.Text</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="badge.html">Badge</a><a data-selected="false" class="LinkItem_l1gpol2t" href="banner.html">Banner</a><a data-selected="false" class="LinkItem_l1gpol2t" href="bottom-navigation.html">BottomNavigation</a><a data-selected="false" class="LinkItem_l1gpol2t" href="button.html">Button</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="card.html">Card</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="card-actions.html">Card.Actions</a><a data-selected="false" class="LinkItem_l1gpol2t" href="card-content.html">Card.Content</a><a data-selected="false" class="LinkItem_l1gpol2t" href="card-cover.html">Card.Cover</a><a data-selected="false" class="LinkItem_l1gpol2t" href="card-title.html">Card.Title</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="checkbox.html">Checkbox</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="checkbox-android.html">Checkbox.Android</a><a data-selected="false" class="LinkItem_l1gpol2t" href="checkbox-ios.html">Checkbox.IOS</a><a data-selected="false" class="LinkItem_l1gpol2t" href="checkbox-item.html">Checkbox.Item</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="chip.html">Chip</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table.html">DataTable</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table-cell.html">DataTable.Cell</a><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table-header.html">DataTable.Header</a><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table-pagination.html">DataTable.Pagination</a><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table-row.html">DataTable.Row</a><a data-selected="false" class="LinkItem_l1gpol2t" href="data-table-title.html">DataTable.Title</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="dialog.html">Dialog</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="dialog-actions.html">Dialog.Actions</a><a data-selected="false" class="LinkItem_l1gpol2t" href="dialog-content.html">Dialog.Content</a><a data-selected="false" class="LinkItem_l1gpol2t" href="dialog-scroll-area.html">Dialog.ScrollArea</a><a data-selected="false" class="LinkItem_l1gpol2t" href="dialog-title.html">Dialog.Title</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="divider.html">Divider</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="">Drawer</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="drawer-item.html">Drawer.Item</a><a data-selected="false" class="LinkItem_l1gpol2t" href="drawer-section.html">Drawer.Section</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="fab.html">FAB</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="fab-group.html">FAB.Group</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="helper-text.html">HelperText</a><a data-selected="false" class="LinkItem_l1gpol2t" href="icon-button.html">IconButton</a><a data-selected="false" class="LinkItem_l1gpol2t" href="touchable-ripple.html">TouchableRipple</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="">List</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="list-accordion.html">List.Accordion</a><a data-selected="false" class="LinkItem_l1gpol2t" href="list-accordion-group.html">List.AccordionGroup</a><a data-selected="false" class="LinkItem_l1gpol2t" href="list-icon.html">List.Icon</a><a data-selected="false" class="LinkItem_l1gpol2t" href="list-item.html">List.Item</a><a data-selected="false" class="LinkItem_l1gpol2t" href="list-section.html">List.Section</a><a data-selected="false" class="LinkItem_l1gpol2t" href="list-subheader.html">List.Subheader</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="menu.html">Menu</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="menu-item.html">Menu.Item</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="modal.html">Modal</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="portal.html">Portal</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="portal-host.html">Portal.Host</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="progress-bar.html">ProgressBar</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="radio-button.html">RadioButton</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="radio-button-android.html">RadioButton.Android</a><a data-selected="false" class="LinkItem_l1gpol2t" href="radio-button-group.html">RadioButton.Group</a><a data-selected="false" class="LinkItem_l1gpol2t" href="radio-button-ios.html">RadioButton.IOS</a><a data-selected="false" class="LinkItem_l1gpol2t" href="radio-button-item.html">RadioButton.Item</a></div></div><a data-selected="false" class="LinkItem_l1gpol2t" href="searchbar.html">Searchbar</a><a data-selected="false" class="LinkItem_l1gpol2t" href="snackbar.html">Snackbar</a><a data-selected="false" class="LinkItem_l1gpol2t" href="surface.html">Surface</a><a data-selected="false" class="LinkItem_l1gpol2t" href="switch.html">Switch</a><a data-selected="false" class="LinkItem_l1gpol2t" href="text-input.html">TextInput</a><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="toggle-button.html">ToggleButton</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="false" class="LinkItem_l1gpol2t" href="toggle-button-group.html">ToggleButton.Group</a><a data-selected="false" class="LinkItem_l1gpol2t" href="toggle-button-row.html">ToggleButton.Row</a></div></div><div><div class="Row_r5q2p2e"><a data-selected="false" class="LinkItem_l1gpol2t" href="">Typography</a><button data-expanded="true" style="opacity:0" class="ButtonIcon_b1ol5l8s"><svg width="16px" height="16px" viewBox="0 0 16 16"><polygon stroke="none" stroke-width="1" fill-rule="evenodd" fill="currentColor" points="8 4 2 10 3.4 11.4 8 6.8 12.6 11.4 14 10"></polygon></svg></button></div><div data-visible="true" class="GroupItems_gl210no"><a data-selected="true" class="LinkItem_l1gpol2t" href="caption.html">Caption</a><a data-selected="false" class="LinkItem_l1gpol2t" href="headline.html">Headline</a><a data-selected="false" class="LinkItem_l1gpol2t" href="paragraph.html">Paragraph</a><a data-selected="false" class="LinkItem_l1gpol2t" href="subheading.html">Subheading</a><a data-selected="false" class="LinkItem_l1gpol2t" href="text.html">Text</a><a data-selected="false" class="LinkItem_l1gpol2t" href="title.html">Title</a></div></div></nav></div></aside><main class="Container_c119hgic"><div class="HeaderWrapper_h1b6fqjq"><div class="LogoContainer_lz0sul8"><img src="images/sidebar-logo.svg" alt="Logo" class="LogoImage_l1tdaxxn"/></div><div class="ThemeSwitchDiv_ti2lwtw"><label class="Label_lok00ln" style="--lok00ln-0:#000"><input type="checkbox" disabled="" class="Input_i1midrh5"/><div class="Switch_s120pijg"></div></label><svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="23" height="22" fill="orange" viewBox="0 0 130 130" enable-background="new 0 0 129 129"><g><g><path d="m64.5,92.6c15.5,0 28-12.6 28-28s-12.6-28-28-28-28,12.6-28,28 12.5,28 28,28zm0-47.9c11,0 19.9,8.9 19.9,19.9 0,11-8.9,19.9-19.9,19.9s-19.9-8.9-19.9-19.9c0-11 8.9-19.9 19.9-19.9z"></path><path d="m68.6,23.6v-12.9c0-2.3-1.8-4.1-4.1-4.1s-4.1,1.8-4.1,4.1v12.9c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1z"></path><path d="m60.4,105.6v12.9c0,2.3 1.8,4.1 4.1,4.1s4.1-1.8 4.1-4.1v-12.9c0-2.3-1.8-4.1-4.1-4.1s-4.1,1.8-4.1,4.1z"></path><path d="m96.4,38.5l9.1-9.1c1.6-1.6 1.6-4.2 0-5.8-1.6-1.6-4.2-1.6-5.8,0l-9.1,9.1c-1.6,1.6-1.6,4.2 0,5.8 0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2z"></path><path d="m23.5,105.6c0.8,0.8 1.8,1.2 2.9,1.2 1,0 2.1-0.4 2.9-1.2l9.1-9.1c1.6-1.6 1.6-4.2 0-5.8-1.6-1.6-4.2-1.6-5.8,0l-9.1,9.1c-1.6,1.6-1.6,4.2 0,5.8z"></path><path d="m122.5,64.6c0-2.3-1.8-4.1-4.1-4.1h-12.9c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.8,4.1 4.1,4.1h12.9c2.2,1.42109e-14 4.1-1.8 4.1-4.1z"></path><path d="m10.6,68.7h12.9c2.3,0 4.1-1.8 4.1-4.1 0-2.3-1.8-4.1-4.1-4.1h-12.9c-2.3,0-4.1,1.8-4.1,4.1 0,2.3 1.9,4.1 4.1,4.1z"></path><path d="m102.6,106.8c1,0 2.1-0.4 2.9-1.2 1.6-1.6 1.6-4.2 0-5.8l-9.1-9.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l9.1,9.1c0.8,0.8 1.9,1.2 2.9,1.2z"></path><path d="m38.4,38.5c1.6-1.6 1.6-4.2 0-5.8l-9.1-9.1c-1.6-1.6-4.2-1.6-5.8,0-1.6,1.6-1.6,4.2 0,5.8l9.1,9.1c0.8,0.8 1.8,1.2 2.9,1.2s2.1-0.4 2.9-1.2z"></path></g></g></svg></div></div><div class="Inner_ir6lat6"><h1 class="Title_t1dytcq5">Caption</h1><div class="MarkdownContent_m3ctz2y"><p>Typography component for showing a caption.</p>
<div class="screenshots">
  <img src="screenshots/caption.png" />
</div>

<h2 id="usage">
          <a class="anchor" href="#usage">
            <svg width="16" height="16">
              <path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
            </svg>
          </a>
        Usage</h2>
<pre><code class="language-js"><span class="token keyword">import</span> <span class="token operator">*</span> <span class="token keyword">as</span> React <span class="token keyword">from</span> <span class="token string">'react'</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> Caption <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">'react-native-paper'</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> <span class="token function-variable function">MyComponent</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">(</span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span><span class="token class-name">Caption</span></span><span class="token punctuation">&gt;</span></span><span class="token plain-text">Caption</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span><span class="token class-name">Caption</span></span><span class="token punctuation">&gt;</span></span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token keyword">export</span> <span class="token keyword">default</span> MyComponent<span class="token punctuation">;</span></code></pre>
</div><h2>Props</h2><div class="PropInfo_p1eats2g"><a name="style" href="#style" class="PropLabel_psi127e"><code>style</code></a><div class="PropItem_pwdtv5j"><span>Type: </span><code>StyleProp&lt;TextStyle&gt;</code></div></div><div class="PropInfo_p1eats2g"><a name="children" href="#children" class="PropLabel_psi127e"><code>children</code> (required)</a><div class="PropItem_pwdtv5j"><span>Type: </span><code>React.ReactNode</code></div></div><a target="_blank" href="https://github.com/callstack/react-native-paper/edit/master//../src/components/Typography/Caption.tsx" class="EditButtonContainer_emlbhqm"><svg width="16px" height="16px" viewBox="0 0 18 20"><path fill="none" transform="translate(2.000000, 2.000000)" d="M1.5,14.5363545 L1.5,11.3292488 L9.36649374,3.4627884 L12.5735698,6.66982438 L4.7071064,14.5363545 L1.5,14.5363545 Z M14.1535993,5.08986045 L12.5666426,6.67673666 L9.35957774,3.46971186 L10.9465031,1.88274634 C11.4083588,1.42089061 12.1250348,1.42089061 12.5868905,1.88274634 L14.1536082,3.44946407 C14.6154639,3.91131979 14.6154639,4.62799577 14.1536082,5.08985149 Z"></path></svg>Edit this page</a></div></main></div></div>
    <style type="text/css">
      :root {
        --theme-primary-color: #397AF9;
      }
    </style>
  
    <script>
      window.__INITIAL_PATH__ = 'caption';
    </script>
  <script src="app.bundle.js"></script><script src="scripts/snack.js"></script><script src="scripts/version.js"></script></body></html>